<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pricing Grids</title>
  </head>
  <body>
    <!-- 全局容器 -->
    <div class="flex items-center justify-center min-h-screen bg-slate-800">
      <!-- 内部容器 -->
      <div
        class="flex flex-col my-6 space-y-6 md:flex-row md:my-0 md:space-y-0 md:space-x-6"
      >
        <!-- 第1列 -->
        <div
          class="bg-slate-700 rounded-xl text-white w-full md:w-1/3 shrink-0"
        >
          <!-- 上方容器 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">基础版</div>
            <h2 class="mt-10 font-serif text-5xl text-center">100GB</h2>
            <h3 class="mt-2 text-center">¥ 15/月</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
                >购买</a
              >
            </div>
          </div>
          <!-- 边框 -->
          <div class="border-t border-slate-700"></div>
          <!-- 下方容器 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 列表容器 -->
            <div class="flex flex-col space-y-2">
              <!-- 列表项1 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">100GB 容量</span>
              </div>
              <!-- 列表项2 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">可添加成员</span>
              </div>
              <!-- 列表项3 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">额外会员福利</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 第2列 -->
        <div
          class="bg-violet-600 rounded-xl text-white w-full md:w-1/3 shrink-0"
        >
          <!-- 上方容器 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">标准版</div>
            <h2 class="mt-10 font-serif text-5xl text-center">200GB</h2>
            <h3 class="mt-2 text-center">¥ 28/月</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border bg-violet-600 border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
                >购买</a
              >
            </div>
          </div>
          <!-- 边框 -->
          <div class="border-t border-slate-700"></div>
          <!-- 下方容器 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 列表容器 -->
            <div class="flex flex-col space-y-2">
              <!-- 列表项1 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">200GB 容量</span>
              </div>
              <!-- 列表项2 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">可添加成员</span>
              </div>
              <!-- 列表项3 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">额外会员福利</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 第3列 -->
        <div
          class="bg-slate-700 rounded-xl text-white w-full md:w-1/3 shrink-0"
        >
          <!-- 上方容器 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">专业版</div>
            <h2 class="mt-10 font-serif text-5xl text-center">2 TB</h2>
            <h3 class="mt-2 text-center">¥ 65/月</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
                >购买</a
              >
            </div>
          </div>
          <!-- 边框 -->
          <div class="border-t border-slate-700"></div>
          <!-- 下方容器 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 列表容器 -->
            <div class="flex flex-col space-y-2">
              <!-- 列表项1 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">2TB 容量</span>
              </div>
              <!-- 列表项2 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">可添加成员</span>
              </div>
              <!-- 列表项3 -->
              <div class="flex justify-center space-x-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
                <span class="text-sm">额外会员福利</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
